<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {reqCancelOrderInfo, reqOrderInfo, reqQrCode, reqQueryPayStatus} from "@/api/user";
import {OrderInfo, OrderInfoResponseData, PayStatus, QrCode} from "@/api/user/type.ts";
import {ElMessage} from "element-plus";
import QRCode from 'qrcode'
let $route = useRoute();
let orderInfo = ref<OrderInfo>(<OrderInfo>{});
let dialogVisible = ref<boolean>(false)
let imgUrl = ref<string>('');
let timer = ref();
onMounted(()=>{
getOrderInfo();
})
const getOrderInfo = async ()=>{
  let result:OrderInfoResponseData = await reqOrderInfo($route.query.orderId as string);
  if(result.code==200){
    orderInfo.value = result.data;
  }
}
const cancel = async ()=>{
  try{
    let result =  await reqCancelOrderInfo(orderInfo.value.id as string);
    console.log(result);
    getOrderInfo();
  }catch (error) {
    ElMessage({
      type:'error',
      message:'取消预约失败'
    })
  }
}
const openDialog= async ()=>{
  dialogVisible.value=true;
 let result : QrCode = await reqQrCode($route.query.orderId as string);
 imgUrl.value= await  QRCode.toDataURL(result.data.codeUrl);
 timer.value = setInterval(async ()=>{
   let payStatus:PayStatus = await reqQueryPayStatus($route.query.orderId as string);
   console.log(payStatus.data)
   if(payStatus.data){
     clearInterval(timer.value);
     getOrderInfo();
   }
 },2000)

}

const closeDialog=()=>{
  dialogVisible.value=false;
  clearInterval(timer.value)
}
const close =()=>{
  clearInterval(timer.value);
}
</script>

<template>
<el-card class="box-card">
  <template #header>
    <div class="detail">挂号详情</div>
  </template>
  <div class="top">
    <el-tag class="ml-2" type="success">
      <div class="tag">
        <svg t="1723598883339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6216" width="16" height="16"><path d="M414.245926 751.028148l437.57037-453.12c7.300741-7.49037 7.111111-19.531852-0.474074-26.832593-7.49037-7.300741-19.531852-7.111111-26.832593 0.474074L398.506667 712.722963 199.111111 513.327407c-7.395556-7.395556-19.437037-7.395556-26.832593 0l0 0c-7.395556 7.395556-7.395556 19.437037 0 26.832593l212.574815 212.574815c6.731852 6.731852 17.161481 7.300741 24.557037 1.896296C411.211852 753.682963 412.823704 752.545185 414.245926 751.028148z" fill="#1afa29" p-id="6217"></path></svg>
        <span>{{orderInfo.param?.orderStatusString}}</span>
      </div>
    </el-tag>
    <div class="right_info">
      <img src="@/assets/images/code_app.png">
      <div>
        <p>微信 关注“北京114预约挂号”</p>
        <p>快速挂号，轻松就医</p>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="left">
      <el-descriptions
          class="margin-top"
          :column="1"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            就诊人信息:
            </div>
          </template>
         {{orderInfo.patientName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            就诊日期：
            </div>
          </template>
         {{orderInfo.reserveDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            就诊医院：
            </div>
          </template>
         {{orderInfo.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            就诊科室：
            </div>
          </template>
         {{orderInfo.depname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            医生职称：
            </div>
          </template>
         {{orderInfo.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            医事服务费：
            </div>
          </template>
          <span style="color: red">{{orderInfo.amount}}元</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            挂号单号：
            </div>
          </template>
         {{orderInfo.outTradeNo}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
            挂号时间：
            </div>
          </template>
        {{orderInfo.createTime}}
        </el-descriptions-item>
      </el-descriptions>
      <div class="btn" v-if="orderInfo.orderStatus==0||orderInfo.orderStatus==1">
        <el-popconfirm title="确认取消预约吗?" @confirm="cancel" >
          <template #reference>
            <el-button>取消预约</el-button>
          </template>
        </el-popconfirm>

        <el-button type="primary" size="default" v-if="orderInfo.orderStatus==0" @click="openDialog">支付</el-button>
      </div>
    </div>
    <div class="right">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>注意事项</span>
          </div>
        </template>
        <p>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
          <p style="color:red">2、【取号】就诊当天需在{{orderInfo.fetchTime}}在医院取号，未取号视为爽约，该号不退不换；</p>
        <p> 3、【退号】在{{orderInfo.quitTime}}前可在线退号 ，逾期将不可办理退号退费；</p>
        <p> 4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</p>
          <p> 5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>

      </el-card>
    </div>
  </div>
</el-card>
  <div class="paymentDialog">
  <el-dialog v-model="dialogVisible" title="微信支付" width="400" @close="close">
    <div class="qrcode">
      <img :src="imgUrl">
      <p>请使用微信扫一扫</p>
      <p>扫码二维码支付</p>
    </div>

    <template #footer>
      <el-button size="default" @click="closeDialog">关闭窗口</el-button>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.box-card{
  .detail{
    color:#7f7f7f;
    font-weight: 900;
  }
  .top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    .tag{
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        margin-left: 5px;
      }
    }
    .right_info{
      display: flex;
      justify-content: space-between;
      img{
        width: 40px;
        height: 40px;
      }
      p{
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .left{
    flex: 4;
    .btn{
      margin: 10px 0px;
    }
  }
  .right{
    flex: 6;
    margin-left: 20px;
    p{
      line-height: 20px;
    }
  }
}
.paymentDialog{
  ::v-deep(.el-dialog__body){
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .qrcode{
    display: flex;
    flex-direction: column;
    align-items: center;
    p{
      line-height: 30px;
    }
  }
}

</style>
